<template>
  <div>
    <ul>
      <li v-for="item in dataList" :key="item.id" @click="handleClick">
        <h4>{{ item.title }}</h4>
        <p>{{ item.msg }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  created() {
    this.$axios.get("/data/details/wash.json").then((res) => {
      this.dataList = res.data.data;
    });
  },
  data() {
    return {
      dataList: null,
    };
  },
  methods: {
    handleClick(){
      this.$router.push({'name': 'detail'})
    }
  },
};
</script>

<style scoped>
ul li {
  list-style: none;
  box-sizing: border-box;
  height: 60px;
  width: 250px;
  padding: 3px 10px;
  border-radius: 15px;
  margin-left: 10px;
  margin-bottom: 15px;
  color: #000;
  box-shadow: 1px 1px 5px #999;
}

ul li p {
  font-size: 13px;
  margin: -10px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

h4{
  margin-top: 5px;
}



</style>